<template>
  <!-- 课程训练 详情--------------------------------------  p2------------------------------------------------ -->
  <div>
    <!-- 头部 -->
    <!-- 累计训练占比图 -->
    <div class="all_train">
      <div class="all_train_one">
        <div>
          <p>小学五年级(3)班</p>
          <p>时间：2020年5月2号 12:45 - 15:10</p>
          <p>进行中</p>
        </div>
      </div>

      <div class="all_train_center">
        <div>
          <div>
            <p>老师</p>
            <p>刘子晨</p>
          </div>
          <div>
            <p>班级人数</p>
            <p>33</p>
          </div>
          <div>
            <p>男生</p>
            <p>18</p>
          </div>
          <div>
            <p>轮次</p>
            <p>2次</p>
          </div>
          <div>
            <p>模式</p>
            <p>随堂测试（倒计时1分钟）</p>
          </div>
          <div>
            <p>参加人数</p>
            <p>30</p>
          </div>
          <div>
            <p>女生</p>
            <p>12</p>
          </div>
          <div></div>
        </div>
      </div>
      <div class="all_train_one">
        <!-- 圆环图 -->
        <div class="circle_box">
          <div id="main1" style="width: 1.25rem; height: 1.0417rem"></div>
          <div class="main_text">
            <p v-for="(item, index) in circle_arr" :key="index">
              <span :style="{ background: item.color }"></span>
              <span>{{ item.name }} {{ item.num }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 跌级柱状图 -->
    <div class="class_jun">
      <div>
        <p>男女- 成绩标准</p>
        <div>
          <p v-for="(item, index) in pie_arr" :key="index">
            <span :style="{ background: item.color }"></span>
            <span>{{ item.name }} {{ item.num }}</span>
          </p>
        </div>
      </div>

      <div class="jun_box">
        <div class="jun_left">
          <div>
            <p>55.23</p>
            <p>平均个数(个)</p>
          </div>
          <div>
            <p>145.00</p>
            <p>中位数(个)</p>
          </div>
          <div>
            <p>345.04</p>
            <p>最大个数(个)</p>
          </div>
          <div>
            <p>13.12</p>
            <p>最小个数(个)</p>
          </div>
        </div>
        <div class="jun_right">
          <!-- 柱状图 -->
          <div>
            <div
              id="main_pie1"
              style="width: 3.6458rem; height: 2.0833rem; margin: 0 auto"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div class="train_table">
      <div class="container-course">
        <!-- 筛选 --- 导出 -->
        <el-form :inline="true" :model="formScreen" class="demo-form-inline">
          <el-form-item>
            <el-select v-model="formScreen.class" placeholder="选择班级">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formScreen.project" placeholder="模式">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="formScreen.gender" placeholder="成绩">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="search_teacher">
            <el-select v-model="formScreen.gender" placeholder="请输入教师姓名">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="search_button">
            <el-button>搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button>导出列表</el-button>
          </el-form-item>
        </el-form>
        <!-- 分割 -->
        <el-divider></el-divider>
        <!-- 列表 -->
        <div class="content">
          <!-- 内容头部 -->
          <div class="conHeader">
            <div>当前结果：<span>总击 164 条记录</span></div>
            <el-select
              v-model="formScreen.custom"
              class="zidingyi"
              placeholder="自定义显示列"
            >
              <!-- <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option> -->
            </el-select>
          </div>
          <!-- 内容主体 -->
          <div class="conBody">
            <!-- 多选列表 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="序号" width="80">
              </el-table-column>
              <el-table-column prop="workId" label="作业ID" width="120">
              </el-table-column>
              <el-table-column prop="classId" label="年级">
                <template slot-scope="scope">{{ scope.row.classId }}</template>
              </el-table-column>
              <el-table-column prop="teacherId" label="教师姓名">
                <template slot-scope="scope">{{
                  scope.row.teacherId
                }}</template>
              </el-table-column>
              <el-table-column prop="workType" label="作业类型">
                <template slot-scope="scope">{{ scope.row.workType }}</template>
              </el-table-column>
              <el-table-column prop="workContent" label="作业内容">
              </el-table-column>
              <el-table-column prop="progress" label="进度">
                <template slot-scope="scope"
                  >{{ scope.row.progress }}%</template
                >
              </el-table-column>
              <el-table-column prop="state" label="状态"> </el-table-column>
              <el-table-column prop="result" label="成绩"> </el-table-column>
              <el-table-column prop="createTime" label="发布时间">
              </el-table-column>
              <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                  <!-- <el-button
              type="primary"
              @click="toEdit(scope.row.id)"
            >操作</el-button> -->
                  <el-select
                    v-model="operVal"
                    @change="change(scope.row.id)"
                    placeholder="操作"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="1000"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->

    <!-- 备案号 -->
    <p class="copyRight">
      CopyRight © phpok.com 2014-2020, All Right Reserved.
    </p>
  </div>
</template>

<script>
export default {
  name: 'homework-sup',
  data() {
    return {
      search: {
        type: '9年级'
      },
      circle_arr: [
        { name: '及格', color: '#FFD02E', nan: 200, nv: 300, num: '30%' },
        { name: '良好', color: '#62F0FB', nan: 200, nv: 300, num: '30%' },
        { name: '优秀', color: '#0FDD8D', nan: 200, nv: 300, num: '30%' }
      ],
      pie_arr: [
        { name: '男', color: '#24AAFF' },
        { name: '女', color: '#0FDD8D' }
      ],
      formScreen: {
        project: '',
        class: '',
        custom: ''
      },
      tableData: [],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '修改'
      }],
      // operVal
      operVal: ''

    }
  },
  created() {
    this.onLoad()
  },
  mounted() {
    this.$nextTick(function () {
      this.myEcharts_1();
      this.myEcharts_pie1();
    })


  },
  methods: {
    myEcharts_1() {
      let myChart = this.$echartsd.init(document.getElementById('main1'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          show: false,
          data: ['及格', '良好', '优秀']
        },
        color: ['#FFD02E', '#62F0FB', '#0FDD8D'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,

            label: {
              normal: {
                show: false,
                position: 'inner'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },

            data: [
              { value: 100, name: '及格' },
              { value: 200, name: '良好' },
              { value: 300, name: '优秀' },
            ]

          }
        ]
      };
      myChart.setOption(option)
    },






    myEcharts_pie1() {
      let myChart = this.$echartsd.init(document.getElementById('main_pie1'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['优秀', '良好', '及格', '不及格'],
          show: false,
        },
        color: ['#0FDD8D', '#24AAFF'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['不及格', '及格', '良好', '优秀']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '优秀',
            type: 'bar',
            barWidth: 18,
            data: [320, 332, 301, 334]
          },
          {
            name: '良好',
            barWidth: 18,
            type: 'bar',
            data: [120, 132, 101, 134]
          },

        ]
      };
      myChart.setOption(option)
    },

    change_class(index) {
      var arr = this.class_arr;
      console.log(index)
      for (var i in arr) {
        if (arr[index].istap == 1) {
          arr[index].istap = 0;
          return;
        } else {
          arr[index].istap = 1;
          return;
        }
      }
    },
    change_spotr(index) {
      var arr = this.sport_arr;
      for (var i in arr) {
        if (arr[index].istap == 1) {
          arr[index].istap = 0;
          return;
        } else {
          arr[index].istap = 1;
          return;
        }
      }
    },

    // 作业管理首页表
    getWorkTable() {
      this.$http({
        url: this.$http.adornUrl('queryPageTimetable'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": 0,
          "pageSize": 2,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log(res);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changeVal(id, rowIndex) {

      // console.log('dsdaas',id, this.operVal);
      // return
      // console.log(rowIndex);
      if (this.operVal == '2') {
        this.$router.push({ path: `/dealer`, query: { id } })
        console.log('修改', id);
        this.operVal = ''
      } else if (this.operVal == '1') {
        // console.log(id);
        // const res = await delCourse(id)
        const res = delCourse(id)
        console.log(res);
        this.operVal = ''
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        setTimeout(() => {
          this.onLoad()
        }, 1000)
        console.log('删除', id);
      }
    },
    // 教师-首页课程列表
    async onLoad() {
      this.$http({
        url: this.$http.adornUrl('queryCourseInfo'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": 0,
          "pageSize": 10,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log('作业管理-首页列表', res);
        this.tableData = res.data.rows
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
}
.train_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.1302rem;
  .show_one {
    width: 18.5%;
    border-radius: 0.0417rem;
    padding: 0.1458rem 0 0.2083rem 0;
    text-align: center;
    background-color: white;
    > p:nth-of-type(1) {
      font-size: 0.1875rem;
      color: #fff;
      margin-bottom: 0.0417rem;
      color: #0fdd8d;
    }
    > p:nth-of-type(2) {
      font-size: 0.0625rem;
      color: #888;
    }
  }
  .train_one {
    width: 18.5%;
    border-radius: 0.0417rem;
    padding: 0.1458rem 0 0.2083rem 0;
    text-align: center;
    > p:nth-of-type(1) {
      font-size: 0.0625rem;
      color: #fff;
    }
    > p:nth-of-type(2) {
      font-size: 0.1875rem;
      color: #fff;
      margin: 0.0417rem 0;
    }
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.1042rem;
        height: 0.1042rem;
        margin-right: 0.026rem;
      }
      p {
        font-size: 0.0938rem;
        color: #fff;
      }
    }
  }
  .train_one:nth-of-type(1) {
    background-color: #24aaff;
  }
  .train_one:nth-of-type(2) {
    background-color: #0fdd8d;
  }
  .train_one:nth-of-type(3) {
    background-color: #ffd02e;
  }
  .train_one:nth-of-type(4) {
    background-color: #fe7c73;
  }
  .train_one:nth-of-type(5) {
    background-color: #38f1ff;
  }
}
.all_train {
  display: flex;
  background-color: white;
  border-radius: 0.0781rem;
  margin-bottom: 0.1302rem;
  padding: 0.3021rem 0;
  .all_train_one {
    width: 25%;
  }
  .all_train_one:first-child {
    border-right: 0.0052rem solid #f2f2f2;
    padding-left: 0.5573rem;
    > div {
      margin-top: 20%;

      > p:first-child {
        font-size: 0.125rem;
        color: #c0aaaa;
      }
      > p:nth-of-type(2) {
        color: #888888;
        font-size: 0.0729rem;
        margin: 0.0521rem 0;
      }
      > p:nth-of-type(3) {
        font-size: 0.0521rem;
        color: #fff;
        background-color: #0fdd8d;
        display: inline-block;
        padding: 0.0156rem 0.0469rem;
        border-radius: 0.0208rem;
      }
    }
  }
  .all_train_center {
    width: 50%;
    border-right: 0.0052rem solid #f2f2f2;

    > div {
      display: flex;
      flex-wrap: wrap;
      padding-left: 14%;
      justify-content: space-between;
      margin-top: 5%;

      > div {
        margin-bottom: 30px;
        width: 23.333%;
        > p:first-child {
          color: #888888;
          font-size: 0.0625rem;
          margin-bottom: 3px;
        }
        > p:nth-of-type(2) {
          color: #525252;
          font-size: 0.0729rem;
        }
      }
      > div:first-child {
        width: 30%;
      }
      > div:nth-of-type(5) {
        width: 30%;
      }
    }
  }
}
.circle_box {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .main_text > p {
    display: flex;
    align-items: center;
    margin-bottom: 0.1042rem;
    span {
      font-size: 0.0625rem;
      color: #888888;
      margin-right: 0.1563rem;
    }
    > span:nth-of-type(1) {
      width: 0.0729rem;
      height: 0.0729rem;
      border-radius: 50%;
      margin-right: 0.0521rem;
    }
  }
  .main_text > p:last-child {
    margin-bottom: 0;
  }
}
.class_jun {
  padding: 0.1771rem 0.151rem;
  background-color: white;
  border-radius: 0.0781rem;
  margin-bottom: 0.1302rem;
  > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.1rem;
    > p:first-child {
      font-size: 0.0938rem;
      color: #525252;
    }
    > div {
      display: flex;
      align-items: center;
      > p {
        display: flex;
        align-items: center;
        margin-right: 0.1302rem;
        > span:first-child {
          width: 0.1146rem;
          height: 0.1146rem;
          border-radius: 50%;
          display: inline-block;
          margin-right: 0.026rem;
        }
        > span:nth-of-type(2) {
          font-size: 0.0938rem;
          color: #888888;
        }
      }
    }
  }
}
.jun_box {
  display: flex;
  justify-content: space-between;
  .jun_left {
    width: calc(50% - 50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.2135rem;
    > div {
      width: 1.2708rem;
      height: 0.6354rem;
      background-color: #f7fafc;
      border-radius: 0.0781rem;
      margin-bottom: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      > p:first-child {
        font-size: 0.1875rem;
        color: #0fdd8d;
        margin-bottom: 0.026rem;
      }
      > p:nth-of-type(2) {
        font-size: 0.0625rem;
        color: #888888;
      }
    }
    > div:nth-of-type(3),
    > div:nth-of-type(4) {
      margin-bottom: 0;
    }
  }
  .jun_right {
    width: 50%;
  }
}
.train_title {
  margin-bottom: 0.1302rem;
  color: #525252;
  font-size: 0.0938rem;
}
.copyRight {
  color: #9b9b9b;
  font-size: 0.0729rem;
  text-align: center;
  margin: 0.2083rem 0;
}
.axis_box {
  padding: 0.151rem;
  border-radius: 0.0781rem;
  background-color: white;
  .axis_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > p {
      font-size: 0.0938rem;
      color: #525252;
    }
  }
}
.axis_zhi {
  display: flex;
  align-items: center;
  p {
    display: flex;
    align-items: center;
    margin-right: 0.1302rem;
    > span:nth-of-type(1) {
      width: 0.1146rem;
      height: 0.1146rem;
      border-radius: 50%;
      margin-right: 0.0521rem;
    }
    > span:nth-of-type(2) {
      color: #888888;
      font-size: 0.0938rem;
    }
  }
  /deep/.el-input--medium .el-input__inner,
  .el-input--suffix .el-input__inner,
  .el-select .el-input__inner {
    background-color: #f7fbfc;
    height: 0.2188rem;
    width: 0.7396rem;
    border-radius: 0.0521rem;
  }
  .el-select {
    margin: 0 0.1042rem 0 0;
  }
  .el-button {
    width: 0.4479rem;
    height: 0.2188rem;
    background: #0fdd8d;
    color: #fff;
    border-radius: 0.0521rem;
  }
}
.search_teacher {
  /deep/.el-input__inner,
  .el-input--suffix .el-input__inner,
  .el-select .el-input__inner {
    background-color: #f7fbfc;
    height: 0.2188rem;
    width: 1.25rem !important;
    border-radius: 0.0521rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.search_button {
  .el-button {
    width: 0.7396rem;
    height: 0.2188rem;
    background: #0fdd8d;
    border-radius: 0.0521rem;
    font-size: 0.0833rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
  }
}
.container-course {
  padding: 0.1667rem 0.151rem;
  position: relative;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选搜索
  .el-form {
    margin-bottom: 0;
    height: 0.2188rem;
    .el-form-item:last-child {
      position: absolute;
      right: 0.0938rem;
      .el-button {
        width: 0.7396rem;
        height: 0.2188rem;
        background: #0fdd8d;
        border-radius: 0.0521rem;
        font-size: 0.0833rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 1;
      }
    }
    /deep/.el-input--medium .el-input__inner,
    .el-input--suffix .el-input__inner,
    .el-select .el-input__inner {
      background-color: #f7fbfc;
      height: 0.2188rem;
      width: 0.7396rem;
      border-radius: 0.0521rem;
    }
  }
  // 分割线
  .el-divider {
    background-color: #d8f9ed;
  }
  // 内容区
  .content {
    margin: 0;
    .conHeader {
      display: flex;
      justify-content: space-between;
      line-height: 0.1875rem;
      font-size: 0.0729rem;
      margin-bottom: 0.0781rem;
      div {
        color: #525252;
        span {
          color: #888888;
        }
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        background-color: #f7fbfc;
        height: 0.1875rem;
        width: 0.7031rem;
        border-radius: 0.0521rem;
      }
    }
    .conBody {
      .el-table {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          width: 0.4479rem;
          height: 0.1875rem;
          background: #f8f8f8;
          border-radius: 0.0938rem;
          padding: 0 0.1042rem 0 0.1302rem;
          color: #888888;
        }
        /deep/.el-input__suffix {
          display: none;
        }
      }
    }
  }
  // 课程新增
  .add {
    position: fixed;
    right: 2%;
    bottom: 2%;
  }
}
</style>
